<template>
	<!-- 修改个人资料页 -->
	<view class="profile-modify-container">
		<view class="user-avatar" @click="handleUploadAvatar">
			<image :src="userInfo.avatar ? userInfo.avatar : defaultAvatar" mode="scaleToFill" />
		</view>
		<view class="profile-form">
			<uv-form labelPosition="left" :model="userInfo" :rules="rules" ref="form">
				<uv-form-item label="姓名" prop="nickname" borderBottom>
					<uv-input v-model="userInfo.nickname" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="个性签名" labelWidth="80" prop="signature" borderBottom>
					<uv-input v-model="userInfo.signature" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="性别" prop="sex" borderBottom @click="showSexSelect">
					<uv-input v-model="userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
			</uv-form>
			<uv-action-sheet ref="sexSelect" :actions="sexActions" title="请选择性别" @select="sexSelect">
			</uv-action-sheet>
		</view>
		<view class="save-button" @click="handleSubmit">保存</view>
	</view>
</template>

<script>
import request from '@/api/http.js';

export default {
	data() {
		return {
			userInfo: {
				nickname: '',
				sex: '',
				avatar: '',
			},
			rules: {
				'nickname': [{
					required: true,
					message: '请输入姓名',
					trigger: 'blur'
				}],
				'sex': [{
					required: true,
					message: '请选择性别',
					trigger: 'change'
				}]
			},
			sexActions: [{
				name: '男',
			}, {
				name: '女',
			}],
		}
	},
	onShow() {
		this.handleGetUserInfo();
	},
	methods: {
		// 性别选择
		showSexSelect() {
			this.$refs.sexSelect.open();
			this.hideKeyboard();
		},
		// 性别选择返回结果
		sexSelect(e) {
			this.userInfo.sex = e.name;
		},
		hideKeyboard() {
			uni.hideKeyboard()
		},
		async handleUploadAvatar() {
			const token = uni.getStorageSync('token');
			const userId = uni.getStorageSync('userId');
			const res = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera']
			});
			const filePath = res.tempFilePaths[0];
			const uploadRes = await uni.uploadFile({
				url: `http://localhost:9090/users/uploadAvatar`, //仅为示例，并非真实的接口地址
				filePath,
				header: {
					authentication: token,
					id: userId
				},
				name: 'file'
			});
			this.userInfo.avatar = res.tempFilePaths[0];
		},
		async handleGetUserInfo() {
			const res = await request(`/users/getUserData`);
			let userInfo = res.data;
			userInfo.avatar = res.data.avatarUrl;
			userInfo.sex = userInfo.sex === 0 ? '男' : '女';
			this.userInfo = userInfo;
		},
		async handleSubmit() {
			let userInfo = {
				...this.userInfo,
				sex: this.userInfo.sex === '男' ? 0 : 1,
			}
			await request(`/users/updateUserData`, userInfo, 'POST');
			uni.navigateBack({ delta: 1 });
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.profile-modify-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.user-avatar {
		width: 100px;
		height: 100px;
		border-radius: 100%;
		overflow: hidden;
		margin-bottom: 20px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.profile-form {
		width: 80%;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.save-button {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		width: 80%;
		height: 100rpx;
		background-image: linear-gradient(to right, #4A90E2, #357ABD);
		border-radius: 16rpx;
		color: #ffffff;
		text-align: center;
		margin-top: 150rpx;
	}
}
</style>
